<!DOCTYPE html>
<!-- saved from url=(0035)https://resume.jiaqicoder.com/#work -->
<html lang="en" class="sr"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" href="./刘嘉琪的个人简历_files/styles.css">
    <link rel="icon" href="https://resume.jiaqicoder.com/favicon.jpg" type="image/x-icon">
    <!-- =====BOX ICONS===== -->
    <link href="./刘嘉琪的个人简历_files/all.css" rel="stylesheet">
    <link rel="stylesheet" href="./刘嘉琪的个人简历_files/font_2791089_jipt64000yc.css">
    <link href="./刘嘉琪的个人简历_files/boxicons.min.css" rel="stylesheet">

    <title>刘嘉琪的个人简历</title>
</head>

<body _c_t_common="1" style="height: 100%;">
    <!--===== HEADER =====-->
    <header class="l-header">
        <nav class="nav bd-grid">
            <div>
                <a href="https://resume.jiaqicoder.com/#" class="nav__logo">嘉琪</a>
            </div>

            <div class="nav__menu" id="nav-menu">
                <ul class="nav__list">
                    <li class="nav__item"><a href="https://resume.jiaqicoder.com/#home" class="nav__link active">主页</a></li>
                    <li class="nav__item"><a href="https://resume.jiaqicoder.com/#about" class="nav__link">关于</a></li>
                    <li class="nav__item"><a href="https://resume.jiaqicoder.com/#skills" class="nav__link">技能</a></li>
                    <li class="nav__item"><a href="https://resume.jiaqicoder.com/#work" class="nav__link">作品</a></li>
                </ul>
            </div>

            <div class="nav__toggle" id="nav-toggle">
                <i class="bx bx-menu"></i>
            </div>
        </nav>
    </header>

    <main class="l-main">
        <!--===== HOME =====-->
        <section class="home bd-grid" id="home">
            <div class="home__data">
                <h1 class="home__title" data-sr-id="0" style="visibility: visible; opacity: 0; transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -80, 0, 0, 1); transition: opacity 2s cubic-bezier(0.5, 0, 0, 1) 0s, transform 2s cubic-bezier(0.5, 0, 0, 1) 0s;">Hi,<br>我是 <span class="home__title-color">嘉琪</span><br> Web developer</h1>

                <a href="tel:18975664428" class="button" data-sr-id="2" style="visibility: visible; opacity: 0; transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -80, 0, 0, 1); transition: opacity 2s cubic-bezier(0.5, 0, 0, 1) 0s, transform 2s cubic-bezier(0.5, 0, 0, 1) 0s;">联系我</a> 


            </div>

            <div class="home__social">
                <a href="https://blog.csdn.net/weixin_44717047" target="_blank" class="home__social-icon" data-sr-id="7" style="visibility: visible; opacity: 0; transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -80, 0, 0, 1); transition: opacity 2s cubic-bezier(0.5, 0, 0, 1) 0s, transform 2s cubic-bezier(0.5, 0, 0, 1) 0s;"><i class="iconfont icon-csdn"></i></a>
                <a href="https://gitee.com/zyxbj" class="home__social-icon" target="_blank" data-sr-id="8" style="visibility: visible; opacity: 0; transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -80, 0, 0, 1); transition: opacity 2s cubic-bezier(0.5, 0, 0, 1) 0s, transform 2s cubic-bezier(0.5, 0, 0, 1) 0s;"><i class="iconfont icon-gitee-fill-round"></i></a>
                <a href="https://resume.jiaqicoder.com/#" class="home__social-icon wechat" data-sr-id="9" style="visibility: visible; opacity: 0; transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -80, 0, 0, 1); transition: opacity 2s cubic-bezier(0.5, 0, 0, 1) 0s, transform 2s cubic-bezier(0.5, 0, 0, 1) 0s;"><i class="iconfont icon-weixin1"></i></a>
            </div>

            <div class="home__img" data-sr-id="5" style="visibility: visible; opacity: 0; transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -80, 0, 0, 1); transition: opacity 2s cubic-bezier(0.5, 0, 0, 1) 0s, transform 2s cubic-bezier(0.5, 0, 0, 1) 0s;">

                    <svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" class="home_blob">
                        <path fill="#3e6ff4" d="M47.8,-64.3C62.4,-55.2,75,-41.8,79.7,-26.2C84.4,-10.5,81.2,7.4,74.1,22.5C67,37.5,56,49.7,43,58.4C30,67.2,15,72.4,-0.6,73.3C-16.3,74.2,-32.5,70.7,-45.6,62C-58.7,53.3,-68.6,39.4,-75.6,23.3C-82.5,7.2,-86.4,-11.1,-81.1,-26C-75.8,-41,-61.2,-52.6,-46.2,-61.6C-31.1,-70.5,-15.6,-76.8,0.5,-77.5C16.6,-78.2,33.2,-73.4,47.8,-64.3Z" transform="translate(100 100)"></path>
                        <image class="home_blob-img" x="25" y="50" href="assets/img/perfil.png"></image>
                  </svg>
                  
            </div>
        </section>

        <!--===== ABOUT =====-->
        <section class="about section " id="about">
            <h2 class="section-title">关于</h2>

            <div class="about__container bd-grid">
                <div class="about__img" data-sr-id="10" style="visibility: visible; opacity: 0; transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -80, 0, 0, 1); transition: opacity 2s cubic-bezier(0.5, 0, 0, 1) 0s, transform 2s cubic-bezier(0.5, 0, 0, 1) 0s;">
                    <img src="./刘嘉琪的个人简历_files/work_5.jpg" alt="">
                </div>

                <div>
                    <h2 class="about__subtitle" data-sr-id="11" style="visibility: visible; opacity: 0; transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -80, 0, 0, 1); transition: opacity 2s cubic-bezier(0.5, 0, 0, 1) 0s, transform 2s cubic-bezier(0.5, 0, 0, 1) 0s;">我是刘嘉琪</h2>
                    <p class="about__text" data-sr-id="12" style="visibility: visible; opacity: 0; transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -80, 0, 0, 1); transition: opacity 2s cubic-bezier(0.5, 0, 0, 1) 0s, transform 2s cubic-bezier(0.5, 0, 0, 1) 0s;">2021年毕业于湖南农业大学材料化学专业，大四下学期开始自学前端。</p>
                </div>
            </div>
        </section>

        <!--===== SKILLS =====-->
        <section class="skills section" id="skills">
            <h2 class="section-title">技能</h2>

            <div class="skills__container bd-grid">
                <div>
                    <h2 class="skills__subtitle" data-sr-id="13" style="visibility: visible; opacity: 0; transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -80, 0, 0, 1); transition: opacity 2s cubic-bezier(0.5, 0, 0, 1) 0s, transform 2s cubic-bezier(0.5, 0, 0, 1) 0s;">Profesional Skills</h2>
                    <p class="skills__text" data-sr-id="14" style="visibility: visible; opacity: 0; transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -80, 0, 0, 1); transition: opacity 2s cubic-bezier(0.5, 0, 0, 1) 0s, transform 2s cubic-bezier(0.5, 0, 0, 1) 0s;">我熟练使用CSS/Javascript和Vue2/Vue3 及其全家桶(vue-router, vuex, vite,
                        vue-cli)，并对后端有一定的了解。</p>
                    <div class="skills_content ">
                        <div class="skills_header">
                            <i class="iconfont icon-code skills_fronticon"></i>
                            <h3>前端开发</h3>
                            <i class="iconfont icon-jiantoushang skills_arrow"></i>
                        </div>
                        <div class="skills_info" data-sr-id="16" style="visibility: visible; opacity: 0; transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -80, 0, 0, 1); transition: all 0.5s ease 0s, opacity 2s cubic-bezier(0.5, 0, 0, 1) 0s, transform 2s cubic-bezier(0.5, 0, 0, 1) 0s;">
                            <div class="skills__data">
                                <div class="skills__names">
                                    <i class="bx bxl-html5 skills__icon"></i>
                                    <span class="skills__name">HTML5</span>
                                </div>
                                <div>
                                    <span class="skills__percentage">95%</span>
                                </div>

                            </div>
                            <div class="bar_box">
                                <div class="skills__bar skills__html"></div>
                            </div>
                        </div>
                        <div class="skills_info" data-sr-id="17" style="visibility: visible; opacity: 1; transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transition: all 0.5s ease 0s, opacity 2s cubic-bezier(0.5, 0, 0, 1) 0s, transform 2s cubic-bezier(0.5, 0, 0, 1) 0s;">
                            <div class="skills__data">
                                <div class="skills__names">
                                    <i class="bx bxl-css3 skills__icon"></i>
                                    <span class="skills__name">CSS3</span>
                                </div>
                                <div>
                                    <span class="skills__percentage">85%</span>
                                </div>
                            </div>
                            <div class="bar_box">
                                <div class="skills__bar skills__css"></div>
                            </div>
                        </div>
                        <div class="skills_info" data-sr-id="18" style="visibility: visible; opacity: 1; transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transition: all 0.5s ease 0s, opacity 2s cubic-bezier(0.5, 0, 0, 1) 0s, transform 2s cubic-bezier(0.5, 0, 0, 1) 0s;">
                            <div class="skills__data">
                                <div class="skills__names">
                                    <i class="bx bxl-javascript skills__icon"></i>
                                    <span class="skills__name">JAVASCRIPT</span>
                                </div>
                                <div>
                                    <span class="skills__percentage">65%</span>
                                </div>

                            </div>
                            <div class="bar_box">
                                <div class="skills__bar skills__js"></div>
                            </div>
                        </div>
                        <div class="skills_info" data-sr-id="19" style="visibility: visible; opacity: 1; transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transition: all 0.5s ease 0s, opacity 2s cubic-bezier(0.5, 0, 0, 1) 0s, transform 2s cubic-bezier(0.5, 0, 0, 1) 0s;">
                            <div class="skills__data">
                                <div class="skills__names">
                                    <i class="iconfont icon-vuejs-line  skills__icon"></i>
                                    <span class="skills__name">Vue2 / Vue3 全家桶</span>
                                </div>
                                <div>
                                    <span class="skills__percentage">85%</span>
                                </div>
                            </div>
                            <div class="bar_box">
                                <div class="skills__bar skills__vue "></div>
                            </div>
                        </div>
                        <div class="skills_info" data-sr-id="20" style="visibility: visible; opacity: 1; transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transition: all 0.5s ease 0s, opacity 2s cubic-bezier(0.5, 0, 0, 1) 0s, transform 2s cubic-bezier(0.5, 0, 0, 1) 0s;">
                            <div class="skills__data">
                                <div class="skills__names">
                                    <i class="iconfont icon-xiazai1  skills__icon"></i>
                                    <span class="skills__name">Element UI</span>
                                </div>
                                <div>
                                    <span class="skills__percentage">75%</span>
                                </div>
                            </div>
                            <div class="bar_box">
                                <div class="skills__bar skills__elem "></div>
                            </div>
                        </div>
                    </div>
                    <div class="skills_content skills_close">
                        <div class="skills_header">
                            <i class="iconfont icon-server-3"></i>
                            <h3>后端开发</h3>
                            <i class="iconfont icon-jiantoushang skills_arrow"></i>
                        </div>
                        <div class="skills_info" data-sr-id="21" style="visibility: visible; opacity: 1; transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transition: all 0.5s ease 0s, opacity 2s cubic-bezier(0.5, 0, 0, 1) 0s, transform 2s cubic-bezier(0.5, 0, 0, 1) 0s;">
                            <div class="skills__data">
                                <div class="skills__names">
                                    <i class="bx bxl-html5 skills__icon"></i>
                                    <span class="skills__name">Node js</span>
                                </div>
                                <div>
                                    <span class="skills__percentage">65%</span>
                                </div>

                            </div>
                            <div class="bar_box">
                                <div class="skills__bar skills__node"></div>
                            </div>
                        </div>
                        <div class="skills_info" data-sr-id="22" style="visibility: visible; opacity: 1; transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transition: all 0.5s ease 0s, opacity 2s cubic-bezier(0.5, 0, 0, 1) 0s, transform 2s cubic-bezier(0.5, 0, 0, 1) 0s;">
                            <div class="skills__data">
                                <div class="skills__names">
                                    <i class="bx bxl-css3 skills__icon"></i>
                                    <span class="skills__name">Express</span>
                                </div>
                                <div>
                                    <span class="skills__percentage">75%</span>
                                </div>
                            </div>
                            <div class="bar_box">
                                <div class="skills__bar skills__ex"></div>
                            </div>
                        </div>
                        <div class="skills_info" data-sr-id="23" style="visibility: visible; opacity: 1; transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transition: all 0.5s ease 0s, opacity 2s cubic-bezier(0.5, 0, 0, 1) 0s, transform 2s cubic-bezier(0.5, 0, 0, 1) 0s;">
                            <div class="skills__data">
                                <div class="skills__names">
                                    <i class="bx bxl-javascript skills__icon"></i>
                                    <span class="skills__name">MongoDB</span>
                                </div>
                                <div>
                                    <span class="skills__percentage">65%</span>
                                </div>

                            </div>
                            <div class="bar_box">
                                <div class="skills__bar skills__db"></div>
                            </div>
                        </div>

                    </div>
                </div>

                <div>
                    <img src="./刘嘉琪的个人简历_files/work_4.jpg" alt="" class="skills__img" data-sr-id="24" style="visibility: visible; opacity: 1; transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transition: opacity 2s cubic-bezier(0.5, 0, 0, 1) 0.6s, transform 2s cubic-bezier(0.5, 0, 0, 1) 0.6s;">
                </div>
            </div>
        </section>

        <!--===== WORK =====-->
        <section class="work section" id="work">
            <h2 class="section-title">作品</h2>

            <div class="mobile work__container bd-grid">
                <div class="work__img work__image" data-sr-id="26" style="visibility: visible; opacity: 0; transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -80, 0, 0, 1);">
                    <a href="https://jiaqicoder.com/fireblogs" target="_blank"><img src="./刘嘉琪的个人简历_files/work1.jpg" alt=""></a>
                </div>
                <div class="work__img work__image" data-sr-id="27" style="visibility: visible; opacity: 0; transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -80, 0, 0, 1);">
                    <a href="https://jiaqicoder.com/VueShop" target="_blank"><img src="./刘嘉琪的个人简历_files/work2.jpg" alt=""></a>
                </div>
                <div class="work__img work__image" data-sr-id="28" style="visibility: visible; opacity: 0; transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -80, 0, 0, 1);">
                    <a href="https://jiaqicoder.com/travel-site/" target="_blank"><img src="./刘嘉琪的个人简历_files/work3.jpg" alt=""></a>
                </div>
            </div>
            <div class="pc  wrapper">
                <ul class="carousel_list" style="transition: all 0.5s ease 0s; transform: translateX(-25%);">
                    <li class="work__image">
                        <a href="https://jiaqicoder.com/fireblogs" target="_blank"><img src="./刘嘉琪的个人简历_files/work1.jpg" alt=""></a>
                    </li>
                    <li class="work__image">
                        <a href="https://jiaqicoder.com/VueShop" target="_blank"><img src="./刘嘉琪的个人简历_files/work2.jpg" alt=""></a>
                    </li>
                    <li class="work__image">
                        <a href="https://jiaqicoder.com/travel-site/" target="_blank"><img src="./刘嘉琪的个人简历_files/work3.jpg" alt=""></a>
                    </li>
                    <li class="work__image">
                        <a href="https://jiaqicoder.com/fireblogs" target="_blank"><img src="./刘嘉琪的个人简历_files/work1.jpg" alt=""></a>
                    </li>
                </ul>
                <div class="button_wrap">
                    <button class="button button-left" data-sr-id="3" style="visibility: visible; opacity: 0; transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -80, -15.5, 0, 1);"><i class="fas fa-arrow-left"></i></button>
                    <button class="button button-right" data-sr-id="4" style="visibility: visible; opacity: 0; transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -80, -15.5, 0, 1);"><i class="fas fa-arrow-right"></i></button>
                </div>
                <ol class="circles">
                    <li data-n="0" class=""></li>
                    <li data-n="1" class="active"></li>
                    <li data-n="2" class=""></li>
                </ol>
            </div>
        </section>

    </main>

    <!--===== FOOTER =====-->
    <footer class="footer">
        <p class="footer__title">Jiaqi Coder</p>
        <a href="https://blog.csdn.net/weixin_44717047" target="_blank" class="footer__icon"><i class="iconfont icon-icon_csdn"></i></a>
        <a href="https://gitee.com/zyxbj" class="footer__icon" target="_blank"> <i class="iconfont icon-gitee"></i></a>
        <a href="https://resume.jiaqicoder.com/#" class="footer__icon wechat"><i class="iconfont icon-shuyi_weixin"></i></a>
        <p>© 2021 copyright all right reserved</p>
    </footer>

    <!-- mask -->
    <div class="mask isShow">
        <div class="imgbox">
            <i class="iconfont icon-times cancel"></i>
            <img src="./刘嘉琪的个人简历_files/qr.jpg" alt="">
        </div>
    </div>

    <!--===== SCROLL REVEAL =====-->
    <script src="./刘嘉琪的个人简历_files/scrollreveal"></script>

    <!--===== MAIN JS =====-->
    <script src="./刘嘉琪的个人简历_files/main.js.下载"></script>



<div id="fatkun-drop-panel">
        <a id="fatkun-drop-panel-close-btn">×</a>
            <div id="fatkun-drop-panel-inner">
                <div class="fatkun-content">
                    <svg class="fatkun-icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5892"><path d="M494.933333 782.933333c2.133333 2.133333 4.266667 4.266667 8.533334 6.4h8.533333c6.4 0 10.666667-2.133333 14.933333-6.4l2.133334-2.133333 275.2-275.2c8.533333-8.533333 8.533333-21.333333 0-29.866667-8.533333-8.533333-21.333333-8.533333-29.866667 0L533.333333 716.8V128c0-12.8-8.533333-21.333333-21.333333-21.333333s-21.333333 8.533333-21.333333 21.333333v588.8L249.6 475.733333c-8.533333-8.533333-21.333333-8.533333-29.866667 0-8.533333 8.533333-8.533333 21.333333 0 29.866667l275.2 277.333333zM853.333333 874.666667H172.8c-12.8 0-21.333333 8.533333-21.333333 21.333333s8.533333 21.333333 21.333333 21.333333H853.333333c12.8 0 21.333333-8.533333 21.333334-21.333333s-10.666667-21.333333-21.333334-21.333333z" p-id="5893"></path></svg>
                    <div class="fatkun-title">拖拽到此处</div>
                    <div class="fatkun-desc">图片将完成下载</div>
                </div>
            </div>
    </div></body></html>